<template>
  <!-- <router-link to="/">Home</router-link>  -->
  <div class="box-wrapper">
    <div
      class="box"
      v-for="(item, index) in list"
      :key="index"
      :class="active == item.name ? 'chosStyle' : 'nochosSty'"
    >
      <img
        @click="jumpPage(index)"
        src="http://by-image.oss-cn-shanghai.aliyuncs.com/Pre/resume/cover.gif"
      />
      <p>通过动态简历的方式，介绍如何通过代码转换成浏览器的界面</p>
    </div>
    <!-- <div class="box">
      <img @click="jumpPage1"
        src="http://by-image.oss-cn-shanghai.aliyuncs.com/Pre/drumkit/demo-2.gif"
      />
      <p> 通过动态简历的方式，介绍如何通过代码转换成浏览器的界面</p>
      </li>
      <li>
      <img   @click="jumpPage2"     
      src="http://by-image.oss-cn-shanghai.aliyuncs.com/Pre/onoff/cover.gif"
      />
      <p> 通过动态简历的方式，介绍如何通过代码转换成浏览器的界面</p>
      </li>
      <li>
      <img @click="jumpPage3"
      src="http://by-image.oss-cn-shanghai.aliyuncs.com/Pre/bulletScreen/%E5%BC%B9%E5%B9%95.jpeg"
      />
      <p> 通过动态简历的方式，介绍如何通过代码转换成浏览器的界面</p>
      </div> -->
  </div>
</template>

<script>
<<<<<<< HEAD
// @ is an alias to /src

export default {
  name: "Home",
  components: {
  }
};
</script>
=======
const routerNameList = ["About", "interest", "induction", "ready"];
export default {
  name: "Home",
  data() {
    return {
      active: "interest",
      list: [
        { name: "趣味小课", activeName: "interest" },
        { name: "预备课程", activeName: "ready" },
        { name: "编程入门", activeName: "induction" },
        { name: "技术门类+", activeName: "science" },
      ],
    };
  },
  methods: {
    changeNav(name) {
      console.log("name", name);
      this.name = name;
    },
    jumpPage(index) {
      console.log("index", index);
      this.$router.push({
        name: routerNameList[index],
      });
    },
    jumpPage1() {
      this.$router.push({
        path: "/interest",
      });
    },
    jumpPage2() {
      this.$router.push({
        path: "/induction",
      });
    },
    jumpPage3() {
      this.$router.push({
        path: "/ready",
      });
    },
  },
};
</script>
<style lang="scss">
li {
  list-style: none;
}
img {
  width: 400px;
  height: 300px;
  margin: auto;
  // margin: 100px 100px 50px auto
}
.home {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  background-color: rgb(221, 215, 215);
  display: flex;
  justify-content: space-around;
  align-items: center;
  &-left {
    width: 30%;
    height: 100%;
    background-color: rgb(114, 170, 187);
  }
  h1 {
    margin-top: 60px;
  }
  &-right {
    // width: 70%;
    height: 100%;
    margin: auto;
    // background-color: pink;
    justify-content: space-between;
  }
}
.box-wrapper {
  display: flex;
  flex-wrap: wrap;
}
.box.nochosSty {
  padding: 20px;
  width: 50%;
  box-sizing: border-box;
}
</style>
>>>>>>> 6bf8714517698cba3c843e451acfb7d17c339c11
